<template>
  <GridPage title="企业人员管理" size="full">
    <n-card class="mt-12" title="人员列表">
      <n-data-table
        :columns="staffColumns"
        :data="staff"
        :bordered="false"
        max-height="350px"
        :pagination="pagination"
      />
    </n-card>
    <n-card class="mt-12" title="申请列表" v-if="isOwner">
      <n-data-table
        :columns="applyColumns"
        :data="companyApplications"
        :bordered="false"
        max-height="350px"
        :pagination="pagination"
      />
    </n-card>
  </GridPage>
</template>

<script setup>
import { GridPage } from '@/components'
import companyApi from '@/api/company'
import { useRecruiterStore } from '@/store/modules/recruiter'
import { NInput, NTag, NButton } from 'naive-ui'
const router = useRouter()
const recruiterStore = useRecruiterStore()

//已提交的申请列表
const companyApplications = ref([])
//公司人员列表
const staff = ref([])

const applyState = [
  { label: '待审核', type: 'warning' },
  { label: '已通过 ', type: 'success' },
  { label: '未通过 ', type: 'error' },
  { label: '已撤销', type: 'error' },
]

//是否 为一个公司的所有者
const isOwner = ref(true)

//性别
const genders = [
  { value: 0, label: '女' },
  { value: 1, label: '男' },
]

const staffColumns = computed(() => {
  const cols = [
    {
      title: '招聘人员id',
      align: 'center',
      key: 'recruiter_id',
      width: '140px',
    },
    {
      title: '招聘人员名称',
      align: 'center',
      key: 'name',
      width: '140px',
    },
    {
      title: '头衔',
      align: 'center',
      key: 'title',
      width: '140px',
      render(row, index) {
        return h(NInput, {
          disabled: !isOwner.value,
          value: row.title,
          onUpdateValue(v) {
            staff.value[index].title = v
          },
          onBlur() {
            updateRecruiterTitle(row)
          },
        })
      },
    },
    {
      title: '性别',
      align: 'center',
      key: 'gender',
      width: '140px',
      render(row) {
        return genders[row.gender].label
      },
    },
    {
      title: '联系电话',
      align: 'center',
      key: 'phone_number',
      width: '140px',
    },
    {
      title: '操作',
      align: 'center',
      key: 'actions',
      width: isOwner ? 100 : 0,
      render(row) {
        return h(
          NButton,
          {
            type: 'error',
            quaternary: true,
            size: 'small',
            disabled: !isOwner || row.recruiter_id === recruiterStore.recruiter.recruiter_id,
            class: 'mr-12',
            onClick: () => removeCompanyStaff(row),
          },
          { default: () => '移除' }
        )
      },
    },
  ]
  return cols.filter((e) => e.width)
})

const applyColumns = ref([
  {
    title: '申请id',
    align: 'center',
    key: 'id',
  },
  {
    title: '申请者id',
    align: 'center',
    key: 'applicant_id',
  },
  {
    title: '申请者名称',
    align: 'center',
    key: 'applicant_name',
  },
  {
    title: '申请时间',
    align: 'center',
    key: 'apply_time',
    sorter: (a, b) => a.apply_time.localeCompare(b.apply_time),
  },
  {
    title: '申请状态',
    align: 'center',
    key: 'state',
    render(row) {
      const o = applyState[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: o.type,
        },
        {
          default: () => o.label,
        }
      )
    },
    filterOptions: [
      {
        label: '待审核',
        value: 0,
      },
      {
        label: '已通过',
        value: 1,
      },
      {
        label: '未通过',
        value: 2,
      },
      {
        label: '已撤销',
        value: 3,
      },
    ],
    filter(value, row) {
      return row.state === value
    },
  },
  {
    title: '操作',
    align: 'center',
    key: 'actions',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'primary',
            size: 'small',
            disabled: row.state !== 0,
            class: 'mr-12',
            onClick: () => agreeApply(row),
          },
          { default: () => '同意' }
        ),
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            disabled: row.state !== 0,
            onClick: () => disagreeApply(row),
          },
          { default: () => '拒绝' }
        ),
      ]
    },
  },
])

const pagination = {
  pageSize: 5,
}

async function agreeApply(row) {
  const { data } = await companyApi.agreeJoinCompany(row.id)
  if (data) {
    $message.success('同意申请成功')
    row.state = 1
  }
}

async function disagreeApply(row) {
  const { data } = await companyApi.disagreeJoinCompany(row.id)
  if (data) {
    $message.success('拒绝申请成功')
    row.state = 2
  }
}

//移除招聘人员
async function removeCompanyStaff(row) {
  $dialog.error({
    title: '移除确认',
    content: '确定要移除招聘人员 ' + row.name + ' 吗？ 该操作无法撤销！',
    positiveText: '确认',
    negativeText: '取消',
    async onPositiveClick() {
      await companyApi.removeCompanyStaff(row.recruiter_id)
      $message.success('移除成功')
      staff.value = staff.value.filter((e) => e.recruiter_id !== row.recruiter_id)
    },
  })
}

async function updateRecruiterTitle(row) {
  if (row.title === '') row.title = null
  await companyApi.updateRecruiterTitle(row.recruiter_id, row.title)
  $message.success('更新招聘人员头衔成功')
}

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const company_id = recruiterStore.recruiter.company_id
  if (!company_id) {
    $dialog.create({
      title: '暂无企业信息',
      content: '您暂未加入任何企业，请添加企业后重试',
      positiveText: '加入企业',
      negativeText: '注册企业',
      closable: false,
      maskClosable: false,
      onPositiveClick() {
        router.push('/recruiter/companyJoin')
      },
      onNegativeClick() {
        router.push('/recruiter/companyAuthenticate')
      },
    })
  } else {
    //获取公司所有者的公司加入申请列表
    let res = await companyApi.getCompanyOwnerJoinApplications(
      recruiterStore.recruiter.recruiter_id
    )
    if (!res.data) {
      isOwner.value = false
    } else {
      companyApplications.value = res.data
    }
    //获取公司人员列表
    const { data } = await companyApi.getCompanyStaff(recruiterStore.recruiter.company_id)
    staff.value = data
  }
})
</script>
